<template>
	<main-content
		:tableHeight.sync="tableHeight"
		:otherDependenComponents="otherDependenComponents"
	>
		<template slot="query">
			<el-form
				ref="form"
				:inline="true"
				:model="queryData"
				label-width="100px"
			>
				<el-form-item :label="`${$t('common.choose_merchant')}:`">
					<merchant-select
						v-model="queryData.merchantId"
						:merchantInfo.sync="merchantObj"
						@change="handleMerchantChange"
					></merchant-select>
				</el-form-item>
				<el-form-item
					:label="`${$t('member.yh_account')}:`"
					prop="yhId"
					label-width="110px"
				>
					<el-input
						v-model.trim="queryData.yhName"
						v-input="{ name: 'noEmpty' }"
						clearable
						:placeholder="`${$t('common.please_enter')}`"
					></el-input>
				</el-form-item>
				<el-form-item
					prop="userName"
					:label="`当前添加的会员账号`"
					label-width="180px"
				>
					<el-input
						v-model="queryData.userName"
						v-symbols
						size="medium"
						:placeholder="$t('common.please_enter')"
						clearable
						style="width: 220px"
					></el-input>
				</el-form-item>
				<el-form-item
					prop="blackStatus"
					:label="`${$t('common.components.black_status')}:`"
				>
					<el-select
						v-model="queryData.blackStatus"
						clearable
						:placeholder="$t('common.select_all')"
						:popper-append-to-body="false"
					>
						<el-option
							v-for="item in blackStatusTypeArr"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item
					prop="windControlId"
					:label="`${$t('common.risk_control_level')}:`"
				>
					<el-select
						v-model="queryData.windControlId"
						collapse-tags
						:placeholder="$t('common.select_all')"
						:popper-append-to-body="false"
						clearable
					>
						<el-option
							v-for="item in vipDict"
							:key="item.id"
							:label="item.windControlLevelName"
							:value="item.id"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-form-item prop="timesType">
						<el-select
							v-model="queryData.timesType"
							:placeholder="$t('common.please_choose')"
							style="width: 190px; margin-right: -14px;"
						>
							<el-option
								v-for="item in timesTypeArr"
								:key="item.description"
								:label="item.description"
								:value="item.code"
							></el-option>
						</el-select>
					</el-form-item>
					<el-form-item prop="minCount">
						<el-input
							v-model="queryData.minCount"
							v-symbols
							size="medium"
							:placeholder="$t('common.minimum')"
							style="width: 150px;margin-right: -10px;"
							maxlength="10"
							clearable
							v-input="{ name: 'float', num: '2' }"
							@blur="
								handleAmount(
									queryData,
									1,
									'minCount',
									'maxCount',
									$t('member.check_min_tips')
								)
							"
						></el-input>
					</el-form-item>
					<span>-</span>
					<el-form-item prop="maxCount">
						<el-input
							v-model="queryData.maxCount"
							v-symbols
							size="medium"
							:placeholder="$t('common.maximum')"
							style="width: 150px"
							clearable
							maxlength="10"
							v-input="{ name: 'float', num: '2' }"
							@blur="
								handleAmount(
									queryData,
									2,
									'minCount',
									'maxCount',
									$t('member.check_max_tips')
								)
							"
						></el-input>
					</el-form-item>
				</el-form-item>
				<el-form-item>
					<el-button
						type="primary"
						icon="el-icon-search"
						:disabled="loading"
						:loading="loading"
						size="medium"
						@click="search"
					>
						{{ $t('common.search') }}
					</el-button>
					<el-button
						icon="el-icon-refresh-left"
						:disabled="loading"
						size="medium"
						@click="reset"
					>
						{{ $t('common.reset') }}
					</el-button>
				</el-form-item>
			</el-form>
		</template>
		<template slot="content">
			<el-table
				v-loading="loading"
				element-loading-spinner="el-icon-loading"
				border
				size="mini"
				class="small-size-table"
				:data="tableData"
				style="width: 100%"
				:max-height="tableHeight"
				:header-cell-style="getRowClass"
				highlight-current-row
				show-summary
				:summary-method="(val) => handleRow(val, summary)"
			>
				<el-table-column
					align="center"
					width="240"
					:label="`${$t('member.yh_account')}`"
				>
					<template slot-scope="scope">
						{{ scope.row.yhName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					:label="`${$t('common.components.black_status')}`"
					width="150"
				>
					<template slot-scope="scope">
						<span
							v-if="scope.row.blacklistStatus === 0"
							class="disableRgba"
						>
							{{
								typeFilter(
									scope.row.blacklistStatus,
									'blackStatusType'
								)
							}}
						</span>
						<span
							v-else-if="scope.row.blacklistStatus === 1"
							class="normalRgba"
						>
							{{
								typeFilter(
									scope.row.blacklistStatus,
									'blackStatusType'
								)
							}}
						</span>
						<span v-else>-</span>
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					:label="`${$t('common.risk_control_level')}`"
					width="150"
				>
					<template slot-scope="scope">
						{{ scope.row.windControlName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					:label="`添加账号次数`"
					width="180"
				>
					<template slot-scope="scope">
						{{ scope.row.bindNum }}
					</template>
				</el-table-column>
				<el-table-column align="center" width="120">
					<template slot="header">
						当前添加会员账号
					</template>
					<template slot-scope="scope">
						<div v-if="scope.row.userInfoRespDTOList && scope.row.userInfoRespDTOList.length > 0">
							<div v-for="item in scope.row.userInfoRespDTOList" :key="item.userId">
								{{ item.userName || '-' }}
							</div>
						</div>
						<span v-else>-</span>
					</template>
				</el-table-column>
				<el-table-column
					:label="`${$t('common.belong_merchant')}`"
					align="center"
					width="120"
				>
					<template slot-scope="scope">
						{{ merchantFilter(scope.row.merchantId) }}
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					width="140"
					prop="withdrawalSuccessNum"
				>
					<template slot="header">
						{{ $t('member.members_successful_withdrawals') }}
						<br />
						{{ $t('member.members_rejected_withdrawals') }}
					</template>
					<template slot-scope="scope">
						<span>
							{{ getNumberValue(scope.row.withdrawalSuccessNum) }}
						</span>
						<br />
						<span>
							{{ getNumberValue(scope.row.withdrawalFailNum) }}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					:label="`${$t('member.members_total_amount')}`"
					width="200"
					prop="withdrawalTotalAmount"
				>
					<template slot-scope="scope">
						{{
							handleNumber(
								scope.row.currency,
								scope.row.withdrawalTotalAmount
							)
						}}
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					width="140"
					prop="proxyWithdrawalSuccessNum"
				>
					<template slot="header">
						{{ $t('member.agent_successful_withdrawals') }}
						<br />
						{{ $t('member.agent_rejected_withdrawals') }}
					</template>
					<template slot-scope="scope">
						<span>
							{{
								getNumberValue(
									scope.row.proxyWithdrawalSuccessNum
								)
							}}
						</span>
						<br />
						<span>
							{{
								getNumberValue(scope.row.proxyWithdrawalFailNum)
							}}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					:label="`${$t('member.agent_total_amount')}`"
					width="200"
					prop="proxyTotalAmount"
				>
					<template slot-scope="scope">
						{{
							handleNumber(
								scope.row.currency,
								scope.row.proxyTotalAmount
							)
						}}
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					:label="`${$t('member.yh_new_add_time')}`"
					width="160"
				>
					<template slot-scope="scope">
						{{ scope.row.createdAt || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					:label="`${$t('member.last_withdrawal_time')}`"
					width="160"
				>
					<template slot-scope="scope">
						{{ scope.row.lastWithdrawalTime || '-' }}
					</template>
				</el-table-column>
				<el-table-column align="center" width="220">
					<template slot="header">
						{{ $t('common.last_updateBy') }}
						<br />
						{{ $t('common.last_updateAt') }}
					</template>
					<template slot-scope="scope">
						<span>
							{{ scope.row.updatedBy || '-' }}
						</span>
						<br />
						<span>
							{{ scope.row.updatedAt || '-' }}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					fixed="right"
					align="center"
					:label="`${$t('common.actions')}`"
					width="110"
				>
					<template slot-scope="scope">
						<el-button
							v-if="hasPermission('909300690')"
							:type="
								scope.row.blacklistStatus === 0
									? 'success'
									: 'danger'
							"
							size="medium"
							@click="
								eidtDialog(
									scope.row.blacklistStatus === 0
										? $t('common.turn_on')
										: $t('common.disabled'),
									scope.row
								)
							"
						>
							{{
								scope.row.blacklistStatus === 0
									? $t('common.turn_on')
									: $t('common.disabled')
							}}
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<el-pagination
				v-show="!!total"
				:current-page.sync="pageNum"
				class="pageValue"
				background
				layout="total, sizes,prev, pager, next, jumper"
				:page-size="pageSize"
				:page-sizes="pageSizes"
				:total="total"
				:pager-count="9"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
			></el-pagination>
		</template>
		<el-dialog
			:title="moduleBox"
			center
			:visible.sync="editVisible"
			:width="getWidth('750px')"
			destroy-on-close
		>
			<el-form
				ref="editForm"
				:model="editData"
				label-width="100px"
				@submit.native.prevent="enterSearch"
			>
				<el-form-item
					v-if="moduleBox === this.$t('member.status_change')"
					:label="`${$t('common.components.black_status')}:`"
					prop="deviceType"
				>
					<el-select
						v-model="editData.status"
						:placeholder="$t('common.please_choose')"
						@change="changeAccountStatus"
					>
						<el-option
							v-for="item in blackStatusTypeArr"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item
					key="remark"
					:label="`${$t('common.components.remark')}:`"
					prop="remark"
					:rules="[
						{
							required: true,
							message: $t('member.please_enter_remarks'),
							trigger: 'blur'
						},
						{
							min: 2,
							max: 500,
							message: $t('member.length_2-500'),
							trigger: 'blur'
						}
					]"
				>
					<el-input
						v-model.trim="editData.remark"
						maxlength="500"
						type="textarea"
						show-word-limit
						clearable
						:placeholder="$t('member.length_2-500')"
						@input="handleInput"
					></el-input>
				</el-form-item>
				<span
					v-if="moduleBox === this.$t('member.status_change')"
					style="margin-left:105px;color:#F56C6C;"
				>
					{{ $t('member.yh_dialog_blacklist_status') }}
				</span>
				<!-- <el-form-item v-if="moduleBox === this.$t('member.unbind')">
					<el-checkbox v-if="flag" v-model="checked">
						{{ $t('member.bmh_dialog_disable') }}
					</el-checkbox>
				</el-form-item> -->
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="cancel">{{ $t('common.cancel') }}</el-button>
				<el-button
					type="primary"
					:disabled="submitEditDisabled"
					@click="submitEdit"
				>
					{{ $t('common.sure') }}
				</el-button>
			</div>
		</el-dialog>
	</main-content>
</template>

<script>
import list from '@/mixins/list'
import { routerNames } from '@/utils/consts'
import MainContent from '@/components/MainContent/index.vue'
import summaryList from './components/summaryList'
export default {
	name: routerNames.bmhAccountManage,
	components: {
		MainContent
	},
	mixins: [list, summaryList],
	data() {
		return {
			tableHeight: 480,
			otherDependenComponents: [],
			queryData: {
				nameType: '1',
				timesType: '1'
			},
			tableData: [],
			merchantObj: '',
			total: 0,
			vipDict: [],
			isShowSummary: true,
			editData: { status: '', remark: '' },
			moduleBox: '',
			editVisible: false,
			checked: false,
			flag: false,
			submitEditDisabled: false,
			summary: {}
		}
	},
	computed: {
		accountTypeArr() {
			return this.globalDics.accountType || []
		},
		blackStatusTypeArr() {
			return this.globalDics.blackStatusType || []
		},
		bindStatusTypeArr() {
			return this.globalDics.bindStatusType || []
		},
		timesTypeArr() {
			return [
				{
					code: '1',
					description: this.$t(
						'member.members_successful_withdrawals'
					)
				},
				{
					code: '2',
					description: this.$t('member.members_rejected_withdrawals')
				},
				{
					code: '3',
					description: this.$t('member.members_total_amount')
				},
				{
					code: '4',
					description: this.$t('member.agent_successful_withdrawals')
				},
				{
					code: '5',
					description: this.$t('member.agent_rejected_withdrawals')
				},
				{
					code: '6',
					description: this.$t('member.agent_total_amount')
				}
			]
		}
	},
	created() {
		this.handleMerchantChange()
	},
	mounted() {
		if (!this.$store.getters.isZk) {
			this.queryData.merchantId = this.$store.getters.merchantInfo.id
			this.loadData()
		}
	},
	methods: {
		enterSearch() {
			this.loadData()
		},
		handleInput(val) {
			this.editData.remark = val.replace(NO_SPECIAL_CHAR, '')
		},
		changeAccountStatus(val) {
			this.editData.status = val + ''
		},
		submitEdit() {
			const params = { ...this.editData }
			this.$refs.editForm.validate((valid) => {
				if (valid) {
					this.submitEditDisabled = true
					if (this.moduleBox === this.$t('member.status_change')) {
						params.status = params.status * 1
						this.$api
							.setYhBlackStatus(params)
							.then((res) => {
								if (res.code === 200) {
									this.$message.success(
										this.$t('common.modify_success')
									)
									this.editVisible = false
									this.pageNum = 1
									setTimeout(() => {
										this.loadData()
									}, 500)
								}
							})
							.catch(() => {})
					} else {
						if (this.checked) {
							params.enableBlackStatus = true
							params.status = 0
							params.blacklistStatus = 0
						} else {
							params.enableBlackStatus = false
							params.status = 1
							params.blacklistStatus = 1
						}
						params.bindStatus = 0
						this.$api
							.setUpdateYhBindStatus(params)
							.then((res) => {
								if (res.code === 200) {
									this.$message.success(
										this.$t('member.unbinding_succeeded')
									)
									this.editVisible = false
									this.pageNum = 1
									setTimeout(() => {
										this.loadData()
									}, 500)
								}
							})
							.catch(() => {})
					}
				}
			})
		},
		cancel() {
			this.editData.remark = ''
			this.editVisible = false
		},
		eidtDialog(text, val) {
			this.submitEditDisabled = false

			this.editData.remark = ''
			if (
				text === this.$t('common.turn_on') ||
				text === this.$t('common.disabled')
			) {
				this.moduleBox = this.$t('member.status_change')
				this.editData.id = val.id
				this.editData.userId = val.userId
				this.editData.status = val.blacklistStatus + ''
			} else {
				this.moduleBox = this.$t('member.unbind')
				this.editData.id = val.id
				this.editData.userId = val.userId
				this.editData.status = val.blacklistStatus
				this.editData.bmhId = val.bmhId
				this.flag = val.blacklistStatus === 1
				this.checked = val.blacklistStatus === 1
			}
			this.$nextTick(() => {
				this.editVisible = true
			})
		},
		handleMerchantChange() {
			this.getWindControllerLevelDict({
				windControlType: 8,
				merchantId: this.queryData.merchantId
			})
		},
		getWindControllerLevelDict(params) {
			this.queryData.windControlId = undefined
			this.vipDict = []
			this.$api.getSelectWindControlLevel(params).then((res) => {
				if (res?.code === 200) {
					this.vipDict = res?.data || []
				}
			})
		},
		loadData() {
			this.loading = true
			this.tableData = []
			this.summary = {}
			let params = {
				...this.queryData
			}
			params = {
				...this.getParams(params)
			}
			if (params.windControlId) {
				params.windControlIds = [params.windControlId]
				delete params.windControlId
			}
			this.$api
				.getYhAccountList(params)
				.then((res) => {
					const {
						code,
						data: { record, totalRecord, summary = {} },
						msg
					} = res
					if (res && code && code === 200) {
						this.tableData =
							(res.data &&
								record.length &&
								Object.freeze(record)) ||
							[]
						this.total = (res.data && totalRecord) || 0
						this.summary = summary
					} else {
						this.$message({
							message: res && msg,
							type: 'error'
						})
					}
				})
				.catch(() => {})
				.finally(() => {
					this.loading = false
				})
		},
		reset() {
			this.queryData = {
				nameType: '1',
				timesType: '1'
			}
			this.merchantObj = ''
			this.loadData()
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .el-table__fixed-footer-wrapper .cell,
::v-deep .el-table__footer-wrapper .cell {
	height: 100%;
	padding: 0 !important;
	margin: 0 !important;
	> div {
		height: 100%;
	}
}
::v-deep .footer_count_row {
	min-height: 50px;
	height: 50%;
	display: flex;
	font-weight: 700;
	padding: 5px 0;
	align-items: center;
	flex-direction: column;
	justify-content: center;
}
::v-deep .footer_count_row_border {
	border-top: 1px solid #ebeef5;
}
</style>
